<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 以借助 script 标签直接通过 CDN 来使用 Vue： -->
    <script src="./JS/vue.js"></script>
  </head>
  <body>
    <div id="app">
      姓：<input type="text" v-model="firstName" /> <br />名：<input
        type="text"
        v-model="lastName"
      />
      <br />
      <span>{{fullName}}</span>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三",
            fullName: "张-三",
          };
        },
        //监视属性
        watch: {
          firstName(val) {
            this.fullName = val + "-" + this.lastName;
          },
          lastName(val) {
            this.fullName = this.firstName + "-" + val;
          },
        },
        // computed: {
        //   // fullName: {
        //   //   //当有人读取fullname，get就会被调用，且返回值就作为fullname的值
        //   //   get() {
        //   //     return this.firstName + this.lastName;
        //   //   },
        //   //   set(value) {
        //   //     const arr = value.split("-");
        //   //     this.firstName = arr[0];
        //   //     this.lastName = arr[1];
        //   //   },
        //   // },

        //   fullName() {
        //     return this.firstName + this.lastName;
        //   },
        // },
      });
    </script>
  </body>
</html>
